<template>
  <div>
    <input type="text" v-model="age">
    <input type="text" v-model="todo" @keydown.enter="add">
    <!-- <myList :list="ary">
      <template slot-scope="xxx">
        <h1>{{ xxx.q.v }}</h1>
      </template>

      <template slot="myfooter">
        <button>删除</button>
      </template>
    </myList> -->
    <div>---------------</div>
    <!-- <myList :list="ary">
      v-slot: 简写 # 
      <template #default="xxx">
        <h1>{{ xxx.q.v }}</h1>
      </template>
      <template #default="xxx">
        <h2>{{ xxx.q.v }}</h2>
      </template>
      <template #myfooter>
        <button>删除</button>
      </template>
    </myList> -->
    <aaa />
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  父子组件的钩子函数的执行顺序
  父 beforeCreated -> 父 created -> 父 beforeMount -> 要渲染结构了,发现结构里边有儿子
  子 beforeCreated -> 子 created -> 子 beforeMount -> 渲染儿子的结构 儿子结构渲染完成之后
   子 mounted -> 父 mounted
  
  父组件更新 子组件不一定更新 若子组件使用了父祖件的数据 那么父组件更新子组件才会跟着跟新
  子组件更新 父组件也不一定更新

  父 -> beforeUpdate  -> 子beforeUpdate -> 子 updated  -> 父 updated

  父 -> beforeDestory  -> 子 beforeDestory -> 子 destoryed  -> 父 destoryed
   

*/
import myList from './components2/list'
import aaa from './components2/aaa'
export default {
  name: 'XXX',
  data() {
    return {
      age: 888,
      todo: '',
      ary: [
        {
          v: 'haha',
          id: 1
        }
      ]
    }
  },
  updated() {
    console.log("父更新了")
  },
  methods: {
    add() {
      this.ary.unshift({
        id: Math.random(),
        v: this.todo
      })
      this.todo = ''
    }
  },
  components: {
    myList, aaa
  }
}
</script>
<style lang="less">
</style>